<template>
  <div class="page">
    <div class="form">
      <textarea
        class="right"
        placeholder="请输入token"
        v-on:blur="e => (this.token = e.target.value)"
      />
      <button class="butten" v-on:click="initWebSocket">开始链接</button>
    </div>

    <div class="msgs">
      <div class="msg" v-for="item in arr" :id="item">
        <span class="head">{{ item.sender }}:{{ item.date }}</span>
        <span class="body">{{ item.msg }}</span>
      </div>
    </div>

    <div class="form">
      <input class="right" v-on:keyup.13="e => websocketsend(e.target.value)" />
      <button class="butten" v-on:click="e => websocketsend(e.target.value)">发送消息</button>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

//断线重连时间
const reconnectionTime = 5 * 1000
//心跳间隔 最迟60秒
const heartbeatTime = 50 * 1000

export default {
  name: 'position',
  data() {
    return {
      arr: [],
      token: ''
    }
  },
  props: {},
  created() {
    // this.initWebSocket()
  },
  methods: {
    initWebSocket() {
      //初始化weosocket
      const wsuri = 'wss://www.meritocean.cn/wss'
      this.websock = new WebSocket(wsuri)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    websocketonopen() {
      //连接建立之后执行校验
      this.websocketsend(this.token)

      //链接建立后 定时发送心跳 保持长连接
      this.websocketsendheartbeat()
    },
    websocketonerror() {
      //连接建立失败重连
      if (this.initTimeout) {
        clearTimeout(this.initTimeout)
      }
      this.initTimeout = setTimeout(() => this.initWebSocket(), reconnectionTime)
    },
    websocketonmessage(e) {
      //数据接收
      // const redata = JSON.parse(e.data);
      this.arr.push({ sender: '服务器返回消息', msg: e.data, date: moment().format('YYYY-MM-DD hh:mm:ss') })
    },
    websocketsend(Data) {
      //数据发送
      this.arr.push({ sender: '客户端发送消息', msg: Data, date: moment().format('YYYY-MM-DD hh:mm:ss') })
      this.websock.send(Data)
      //重置心跳，减少不必要的消息
      this.websocketsendheartbeat()
    },
    websocketsendheartbeat() {
      //保持长连接心跳
      if (this.heartbeatTimeout) {
        clearTimeout(this.heartbeatTimeout)
      }
      this.heartbeatTimeout = setTimeout(() => {
        this.websocketsend('心跳')
        this.websocketsendheartbeat()
      }, 10 * 1000)
    },
    websocketclose(e) {
      //数据发送
      //关闭
      console.log('断开连接', e)
      ///连接建立失败重连
      if (this.initTimeout) {
        clearTimeout(this.initTimeout)
      }
      this.initTimeout = setTimeout(() => this.initWebSocket(), reconnectionTime)
    }
  }
}
</script>

<style>
.page {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form {
  width: 50%;

  display: flex;
  flex-direction: row;
}

.form .left {
  flex: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.form .right {
  flex: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form .butten {
  width: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.msgs {
  height: 300px;
  width: 50%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.msgs .msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.msgs .msg .head {
  display: flex;
  flex-direction: column;
  font-weight: bold;
}
.msgs .msg .body {
  display: flex;
  flex-direction: column;
}
</style>
